<template>
	<view class="container">
		<view class="content-wrapper">
			<image src="/static/info1.jpg" mode="widthFix" style="width: 100%; border-radius: 10rpx;"></image>
			
			<view class="mt-20">
				<text class="block title-text">北京夏日避暑好去处，这些地方你去过几个？</text>
				
				<view class="flex align-center mt-20 info-meta">
					<text class="text-gray">旅游达人</text>
					<text class="text-gray separator">|</text>
					<text class="text-gray">2023-06-10</text>
					<text class="text-gray separator">|</text>
					<text class="text-gray">阅读: 1280</text>
				</view>
				
				<view class="content mt-30">
					<text class="block">夏日炎炎，北京的高温让人难以忍受，想要寻找一处清凉的避暑胜地成为了许多人的需求。今天，我们就为大家推荐几个北京周边的避暑好去处，让您在炎热的夏天也能感受到清凉与惬意。</text>
					
					<text class="block mt-20">1. 十渡风景区</text>
					<text class="block mt-10">十渡风景区位于北京市房山区，是国家AAAA级旅游景区，以独特的喀斯特地貌和清澈的拒马河水而闻名。这里山清水秀，空气清新，夏季气温比市区低5-8℃，是理想的避暑胜地。游客可以在这里体验漂流、攀岩、蹦极等刺激项目，也可以选择在河边戏水、烧烤，享受悠闲的夏日时光。</text>
					
					<text class="block mt-20">2. 古北水镇</text>
					<text class="block mt-10">古北水镇位于北京市密云区，是一座仿古江南水乡小镇。这里不仅有精美的古建筑群，还有丰富的娱乐项目。夏季的古北水镇绿树成荫，小桥流水，凉爽宜人。夜晚时分，古镇灯火辉煌，别有一番韵味。游客可以在这里品尝特色美食，体验传统手工艺，或者在长城脚下欣赏星空。</text>
					
					<text class="block mt-20">3. 延庆百里山水画廊</text>
					<text class="block mt-10">延庆百里山水画廊位于北京市延庆区，是一处集自然风光与人文景观于一体的风景区。这里山峦起伏，植被茂密，夏季平均气温只有20℃左右。游客可以在这里骑行、徒步，欣赏沿途的山水美景，感受大自然的清新与宁静。</text>
					
					<text class="block mt-20">4. 云蒙山国家森林公园</text>
					<text class="block mt-10">云蒙山国家森林公园位于北京市密云区，是京郊著名的森林公园。这里森林覆盖率高达90%以上，空气中负氧离子含量丰富，被誉为"天然氧吧"。夏季的云蒙山气候凉爽，是避暑休闲的好去处。游客可以在这里登山观景，呼吸新鲜空气，享受大自然的恩赐。</text>
					
					<text class="block mt-20">以上就是为大家推荐的几个北京夏日避暑好去处，希望对您的夏日出行有所帮助。在享受清凉的同时，也请注意做好防晒措施，安全出游。</text>
				</view>
			</view>
			
			<view class="card mb-20">
				<view class="flex justify-between mb-20">
					<text class="title">相关推荐</text>
				</view>
				
				<view class="recommend-list">
					<view class="recommend-item flex mb-20" v-for="(item, index) in recommendList" :key="index" @click="goToDetail(item)">
						<image :src="item.image" mode="aspectFill" style="width: 200rpx; height: 150rpx; border-radius: 10rpx;"></image>
						<view style="flex: 1; margin-left: 20rpx;">
							<text class="block" style="font-weight: bold;">{{ item.title }}</text>
							<text class="block text-gray mt-10">{{ item.desc }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 修复底部固定定位问题 -->
		<view class="fixed-bottom flex">
			<view class="flex align-center interactive-item" @click="toggleCollect">
				<text class="iconfont" :class="isCollected ? 'icon-collected text-red' : 'icon-collect'" style="font-size: 40rpx; margin-right: 10rpx;"></text>
				<text>{{ isCollected ? '已收藏' : '收藏' }}</text>
			</view>
			<view class="button" style="flex: 2;" @click="share">分享</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isCollected: false, // 收藏状态
				recommendList: [
					{
						id: 2,
						title: '北京特色小吃推荐，吃货必看攻略',
						desc: '北京作为历史悠久的古都，不仅有丰富的文化古迹，还有众多特色小吃...',
						image: '/static/info2.jpg'
					},
					{
						id: 3,
						title: '北京五日游详细攻略，让你玩得尽兴不踩雷',
						desc: '第一次来北京旅游？这份超详细攻略你一定要收藏...',
						image: '/static/info3.jpg'
					}
				]
			}
		},
		methods: {
			goToDetail(item) {
				uni.navigateTo({
					url: '/pages/info/detail?id=' + item.id
				})
			},
			share() {
				uni.showActionSheet({
					itemList: ['分享到微信', '分享到朋友圈', '分享到QQ', '分享到微博'],
					success: (res) => {
						uni.showToast({
							title: `分享到${['微信', '朋友圈', 'QQ', '微博'][res.tapIndex]}`,
							icon: 'success'
						})
					}
				})
			},
			// 切换收藏状态
			toggleCollect() {
				this.isCollected = !this.isCollected;
				uni.showToast({
					title: this.isCollected ? '收藏成功' : '取消收藏',
					icon: this.isCollected ? 'success' : 'none'
				})
			}
		}
	}
</script>

<style>
	.content {
		line-height: 1.6;
	}
	
	/* 修复底部固定定位问题 */
	.fixed-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 20rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		z-index: 999;
	}
	
	.title-text {
		font-weight: bold;
		font-size: 36rpx;
		line-height: 1.4;
	}
	
	.info-meta {
		font-size: 28rpx;
	}
	
	.separator {
		margin: 0 10rpx;
	}
	
	.interactive-item {
		flex: 1;
		padding: 0 20rpx;
		text-align: center;
	}
	
	.recommend-item:last-child {
		margin-bottom: 0; /* 不再需要为底部固定栏留出额外空间 */
	}
	
	.content-wrapper {
		height: calc(100vh - 140rpx);
		overflow-y: auto;
		padding-bottom: 140rpx;
	}
</style>